<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>background-icon</title>
  <style>
    /*
      背景八大属性
      - background：分为两大类

      CSS(5)：
      - background-color
      - background-image
      - background-repeat
      - background-position  -  雪碧图的核心原理
      - background-attachment

      CSS3(3)： css3新增的
     - background-size: 100%  auto  cover  contain
     - background-origin
     - background-clip： text
    */

    .pic {
      width: 200px;
      height: 200px;
      background-image: url(https://img13.360buyimg.com/seckillcms/s280x280_jfs/t1/124088/15/11911/114915/5f55ecfcE4d753a1b/0a6eeeb87e0b2ce7.jpg.webp);
    }

    .main .item {
      float: left;
      width: 25%;
      height: 400px;
      /* background: url(https://mobike.com/cn/assets/themes/moby/img/promo-01.jpg) no-repeat center; */
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
    }

    /*.main .item:nth-child(1) {
      background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-01.jpg);
    }

    .main .item:nth-child(2) {
      background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-02.jpg);
    }

    .main .item:nth-child(3) {
      background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-03.jpg);
    }

    .main .item:nth-child(4) {
      background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-04.jpg);
    }*/
  </style>
</head>

<body>
<div class="pic"></div>

<div class="main">
  <div class="item"
       style="background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-01.jpg);"></div>
  <div class="item"
       style="background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-02.jpg);"></div>
  <div class="item"
       style="background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-03.jpg);"></div>
  <div class="item"
       style="background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-04.jpg);"></div>
</div>
</body>

</html>
